<template>
    <div class="admin-layout">
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px" class="aside">
                <!-- 左侧顶部标题 -->
                <div class="aside-header">
                    <h1 class="site-title">HY万能机器人</h1>
                </div>

                <!-- 导航菜单 -->
                <el-menu default-active="/admin/groups" class="sidebar-menu" background-color="#001529"
                    text-color="#fff" active-text-color="#fff" :router="true">
                    <!-- 飞机群管理 -->
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <Setting />
                            </el-icon>
                            <span>飞机群管理</span>
                        </template>
                        <el-menu-item index="/admin/groups">群列表</el-menu-item>
                        <el-menu-item index="/admin/members">群成员</el-menu-item>
                    </el-sub-menu>

                    <!-- 积分管理 -->
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <Coin />
                            </el-icon>
                            <span>积分管理</span>
                        </template>
                        <el-menu-item index="/admin/points/rules">积分规则</el-menu-item>
                        <el-menu-item index="/admin/points/lottery">抽奖活动</el-menu-item>
                        <el-menu-item index="/admin/points/records">抽奖参与记录</el-menu-item>
                        <el-menu-item index="/admin/points/logs">积分日志</el-menu-item>
                        <el-menu-item index="/admin/points/ranking">积分排行</el-menu-item>
                    </el-sub-menu>

                    <!-- 群控管理 -->
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <Operation />
                            </el-icon>
                            <span>群控管理</span>
                        </template>
                        <el-menu-item index="/admin/group-control/overview">群控概览</el-menu-item>
                        <el-menu-item index="/admin/group-control/messages">群发消息</el-menu-item>
                        <el-menu-item index="/admin/group-control/filter">敏感词过滤</el-menu-item>
                        <el-menu-item index="/admin/group-control/verification">入群验证</el-menu-item>
                    </el-sub-menu>

                    <!-- 帮助中心 -->
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <QuestionFilled />
                            </el-icon>
                            <span>帮助中心</span>
                        </template>
                        <el-menu-item index="/admin/help/forward-guide">转发功能指南</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>

            <!-- 右侧内容区 -->
            <el-container>
                <!-- 头部导航栏 -->
                <el-header class="header">
                    <!-- 左侧面包屑 -->
                    <div class="header-left">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>主页</el-breadcrumb-item>
                            <el-breadcrumb-item>群列表</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>

                    <!-- 右侧用户信息 -->
                    <div class="user-info">
                        <el-avatar :size="32"
                            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                        <span class="username">小李科技</span>
                        <el-button link type="primary" @click="handleLogout">退出登录</el-button>
                    </div>
                </el-header>

                <!-- 页签区域 -->
                <div class="tabs-wrapper">
                    <div class="tabs-content">
                        <div class="tabs-list">
                            <span v-for="tab in tabs" :key="tab.path" class="tab-item"
                                :class="{ active: activeTab === tab.path }" @click="switchTab(tab)">
                                <span>{{ tab.title }}</span>
                                <el-icon class="tab-close" @click.stop="closeTab(tab)" v-if="tabs.length > 1">
                                    <Close />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- 主内容区域 -->
                <el-main>
                    <router-view></router-view>
                </el-main>

                <!-- 页脚 -->
                <el-footer class="footer">
                    © 2024 IT公用技术支持
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import { Document, Plus, Setting, Operation, List, Warning, Coin, Close, QuestionFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

export default {
    name: 'Admin',
    components: {
        Document,
        Plus,
        Setting,
        Operation,
        List,
        Warning,
        Coin,
        Close,
        QuestionFilled
    },
    setup() {
        const router = useRouter()
        const route = useRoute()

        // 页签数据
        const tabs = ref([
            {
                title: '群列表',
                path: '/admin/groups'
            }
        ])
        const activeTab = ref('/admin/groups')

        // 路由菜单映射表
        const menuMap = {
            '/admin/groups': '群列表',
            '/admin/members': '群成员',
            '/admin/points/rules': '积分规则',
            '/admin/points/lottery': '抽奖活动',
            '/admin/points/records': '抽奖参与记录',
            '/admin/points/logs': '积分日志',
            '/admin/points/ranking': '积分排行',
            // 群控管理
            '/admin/group-control/overview': '群控概览',
            '/admin/group-control/messages': '群发消息',
            '/admin/group-control/filter': '敏感词过滤',
            '/admin/group-control/verification': '入群验证',
            // 帮助中心
            '/admin/help/forward-guide': '转发功能指南'
        }

        // 添加页签
        const addTab = (path) => {
            const title = menuMap[path]
            if (!title) return

            // 检查页签是否已存在
            const isExist = tabs.value.some(tab => tab.path === path)
            if (!isExist) {
                tabs.value.push({ title, path })
            }
            activeTab.value = path
        }

        // 切换页签
        const switchTab = (tab) => {
            router.push(tab.path)
            activeTab.value = tab.path
        }

        // 关闭页签
        const closeTab = (tab) => {
            const index = tabs.value.findIndex(item => item.path === tab.path)
            if (index === -1) return

            // 如果关闭的是当前激活的页签，则需要切换到其他页签
            if (activeTab.value === tab.path) {
                const nextTab = tabs.value[index + 1] || tabs.value[index - 1]
                if (nextTab) {
                    router.push(nextTab.path)
                    activeTab.value = nextTab.path
                }
            }

            // 移除页签
            tabs.value.splice(index, 1)
        }

        // 监听路由变化
        watch(() => route.path, (newPath) => {
            addTab(newPath)
        }, { immediate: true })

        // 退出登录
        const handleLogout = () => {
            ElMessageBox.confirm('确定要退出登录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 清除登录状态
                localStorage.removeItem('token')
                router.push('/login')
                ElMessage.success('退出成功')
            }).catch(() => { })
        }

        // 获取角色标签类型
        const getRoleTagType = (role) => {
            switch (role) {
                case '群主':
                    return 'primary'
                case '管理员':
                    return 'success'
                default:
                    return 'info'
            }
        }

        // 处理表格选择
        const handleSelectionChange = (selection) => {
            console.log('选中的行:', selection)
        }

        // 查看数据
        const viewData = (row) => {
            ElMessage.info(`查看用户 ${row.nickname} 的数据`)
        }

        // 删除项目
        const deleteItem = (row) => {
            ElMessageBox.confirm(`确定要删除用户 ${row.nickname} 吗？`, '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                ElMessage.success('删除成功')
            })
        }

        // 处理搜索
        const handleSearch = () => {
            console.log('搜索条件:', filterForm)
        }

        // 处理分页
        const handleSizeChange = (val) => {
            console.log('每页条数:', val)
        }

        const handleCurrentChange = (val) => {
            console.log('当前页:', val)
        }

        return {
            tabs,
            activeTab,
            switchTab,
            closeTab,
            handleLogout,
            getRoleTagType,
            handleSelectionChange,
            viewData,
            deleteItem,
            handleSearch,
            handleSizeChange,
            handleCurrentChange
        }
    }
}
</script>

<style scoped>
.admin-layout {
    min-height: 100vh;
}

.aside {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #001529;
    z-index: 1000;
    overflow-y: auto;
}

.aside-header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background-color: #002140;
}

.site-title {
    color: white;
    font-size: 18px;
    margin: 0;
    white-space: nowrap;
}

.header {
    background-color: #fff;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    right: 0;
    left: 200px;
    z-index: 999;
}

.header-left {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.username {
    font-size: 14px;
    color: #333;
}

.sidebar-menu {
    border-right: none;
}

.el-container {
    margin-left: 200px;
    min-width: 800px;
}

.el-main {
    margin-top: 60px;
    min-height: calc(100vh - 60px - 60px);
    background-color: #f0f2f5;
    padding: 20px;
}

.footer {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 20px 0;
    background-color: #f0f2f5;
}

:deep(.el-menu-item.is-active) {
    background-color: #1890ff !important;
}

:deep(.el-menu) {
    border-right: none;
}

:deep(.el-sub-menu .el-menu-item) {
    min-width: 0;
    margin: 0;
}

.aside+.el-container {
    margin-left: 5px;
}

:deep(.el-table) {
    --el-table-header-bg-color: #f5f7fa;
    --el-table-border-color: #ebeef5;
}

:deep(.el-table th) {
    background-color: #f5f7fa;
    font-weight: 600;
}

/* 页签样式 */
.tabs-wrapper {
    background-color: #fff;
    padding: 0;
    margin-top: 60px;
    border-bottom: 1px solid #e8e8e8;
}

.tabs-content {
    padding: 0 15px;
    height: 40px;
    display: flex;
    align-items: center;
}

.tabs-list {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tab-item {
    height: 32px;
    padding: 0 15px;
    background: #f0f2f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #606266;
    margin: 4px 0;
    transition: all 0.3s;
}

.tab-item:hover {
    background: #e6f7ff;
    color: #1890ff;
}

.tab-item.active {
    background: #e6f7ff;
    color: #1890ff;
    font-weight: 500;
}

.tab-close {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.tab-close:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #f56c6c;
}

/* 调整主内容区域的上边距，为页签腾出空间 */
.el-main {
    margin-top: 0;
    padding: 15px !important;
}

/* 调整头部样式 */
.header {
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
}

/* 调整面包屑样式 */
:deep(.el-breadcrumb) {
    line-height: 60px;
    font-size: 13px;
}

/* 调整用户信息样式 */
.user-info {
    font-size: 13px;
}

.username {
    font-size: 13px;
}
</style>